<template>
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="state.name"
          name="收件人"
          label="收件人"
          clearable
          placeholder="收件人"
          :rules="[{ required: true, message: '请填写收件人' }]"
        />
        <van-field
          v-model="state.phone"
          name="联系电话"
          clearable
          label="联系电话"
          placeholder="输入你的联系电话"
          :rules="[{ required: true, message: '请填写手机号' },
              { pattern: /^1\d{10}$/, message: '手机号码格式错误！'}]"
        />
        <van-field
          v-model="state.value"
          readonly
          clickable
          name="picker"
          label="地区"
          placeholder="点击选择城市"
          @click="showPicker = true"
        />
        <van-action-sheet v-model="showPicker">
          <van-picker
            ref="picker"
            :show-toolbar="true"
            :columns="geosList"
            value-key="name"
            @change="onAreaChange"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-action-sheet>
        <van-field
          v-model="state.addr"
          name="详细地址"
          label="详细地址"
          clearable
          placeholder="详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]"
        />
        <van-field name="switch" label="设为默认地址">
          <template #input>
            <van-switch
              v-model="state.is_default"
              inactive-value="0"
              active-value="1"
              active-color="#009697"
              size="24"
            />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 53px;">
        <van-button round block native-type="submit">保存</van-button>
        <van-button
          v-if="this.state.address_id"
          round
          block
          @click="handleDel"
          native-type="button"
        >删除</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant'
import { handleTree } from '@/utils'
import { areaList } from '@vant/area-data'
import { addAddress, saveAddress, delAddress } from '@/api/mine/personal'
export default {
  data() {
    return {
      state: {
        address_id: null,
        name: null,
        phone: null,
        province: null,
        city: null,
        town: null,
        addr: null,
        is_default: null,
        value: null
      },
      searchResult: [],
      areaList,
      showPicker: false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      geosIndex1: 0,
      geosIndex2: 0,
      geosIndex3: 0,
      fillObj: [
        {
          code: "",
          depth: 3,
          name: "",
          parent: "",
          sort: 0
        },
        {
          code: "",
          depth: 3,
          name: "",
          parent: "",
          sort: 0
        }
      ]
    }
  },

  computed: {
    geosList() {
      const geosList = handleTree(this.$store.getters.geosList, 'code')
      geosList.map(b => {
        b.text = b.name
      })
      return geosList
    }
  },

  mounted() {
    this.fetchList()
  },

  methods: {
    fetchList() {
      if (this.$route.query.row) {
        const row = JSON.parse(decodeURIComponent(this.$route.query.row))
        this.state = {
          address_id: row.id,
          name: row.name,
          phone: row.phone,
          province: row.province,
          city: row.city,
          town: row.town,
          addr: row.addr,
          is_default: row.is_default + '',
          value: row.province_name + row.city_name + row.town_name
        }
      } else {
        this.state = {
          address_id: null,
          name: null,
          phone: null,
          province: null,
          city: null,
          town: null,
          addr: null,
          is_default: null,
          value: null
        }
      }
    },
    //当地区选择变化时
    onAreaChange(picker, values, index) {
      console.log('this.geosList', this.geosList)
      console.log('picker', picker)
      console.log('values', values)
      console.log('index', index)
      if (index == 0) {
        this.geosIndex1 = picker.getColumnIndex(index)
      } else if (index == 1) {
        this.geosIndex2 = picker.getColumnIndex(index)
        if (this.geosList[this.geosIndex1].children[this.geosIndex2].children) {

        } else {

          picker.setColumnValues(2, this.fillObj)
        }

      }
    },
    // 选择地区
    onConfirm(value) {
      this.state.value = value
      const data = this.$refs.picker.getValues()
      this.state.province = data[0].code
      this.state.city = data[1].code
      this.state.town = data[2].code
      this.showPicker = false
    },
    // 保存
    onSubmit(values) {
      if (this.state.address_id) {
        saveAddress(this.state).then(res => {
          Toast.success(res.msg)
          this.$router.go(-1)
        })
      } else {
        addAddress(this.state).then(res => {
          Toast.success(res.msg)
          this.$router.go(-1)
        })
      }
    },
    // 删除
    handleDel() {
      Dialog.confirm({
        title: '提示',
        message: '是否确认删除该地址'
      }).then(() => {
        const data = {
          address_id: this.state.address_id
        }
        return delAddress(data)
      }).then(res => {
        Toast.success(res.msg)
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-form {
  .van-cell {
    height: 50px;
    align-items: center;
  }
  .van-cell__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
  }
  .van-cell__value {
    font-size: 15px;
  }
  .van-button {
    height: 45px;
    background: #009697;
    border: 0.02667rem solid #009697;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
  }
  .van-button:nth-child(2) {
    margin-top: 15px;
    color: #fc7200;
    background: #fff;
    border: 1px solid #fc7200;
  }
}
::v-deep .van-field__error-message {
  display: none;
}
</style>
